<!DOCTYPE html>
<html>
  <head>
    <title>demo</title>
    <style>
      body {
        font-size: 16px;
      }

      button {
        padding: 6px 12px;
        border-radius: 5px;
        border: 1px solid #e8e8e8;
        background-color: #efefef;
        cursor: pointer;
      }

      button:hover {
        border: 1px solid rgba(0, 0, 0, 0.5);
        background-color: rgba(0, 0, 0, 0.5);
        color: #ffffff;
      }
    </style>
  </head>

  <body>
    <button onclick="goHome()">go home</button>
    <button onclick="buttonClickHandle()">router push query</button>
    <button onclick="buttonClickHandleE()">router go</button>
    <button onclick="buttonClickHandleF()">router replace</button>
    <button onclick="buttonClickHandleD()">router push params</button>
    <button onclick="buttonClickHandleB()">router redirect</button>
    <button onclick="buttonClickHandleC()">router back</button>
    <script src="lib/index.js"></script>
    <script>
      const { createRouter } = mfoRouter;
      const router = createRouter({
        mode: "hash",
        base: "./",
        routes: [
          {
            name: "home",
            path: "/",
            render: () => {
              console.log("home");
            },
          },
          {
            name: "user",
            path: "/user",
            render: () => {
              console.log("user");
            },
          },
        ],
      });
      router.addRoute({
        name: "userParams",
        path: "/user-params/id/name",
        render: () => {
          console.log("userParams");
        },
      });
      router.addRoute({
        name: "defaultHome",
        path: "/default-home",
        redirect: "/",
      });
      router
        .addRoute({
          name: "deleteHome",
          path: "/delete-home",
          redirect: "/",
        })
        .removeRoute("deleteHome");
      const res = router.hasRoute("/delete-home");
      console.log(res);
      router.beforeEach((from, to, next) => {
        console.log("[beforeEach]", from, to);
        /* Intercept jump */
        if (to && to.path === "/default-home") {
          next("/user");
        } else {
          next();
        }
      });
      router.afterEach((from, to) => {
        console.log("[afterEach]", from, to);
      });
      router.forceUpdate();
      /* route jump error */
      router.routeJumpErrorFeedBack((err) => console.error(err));
      console.log(router);

      /* button click handle */
      const goHome = () => {
        router.push("/");
      };
      const buttonClickHandle = () => {
        router.push({ path: "/user", query: { a: 1 } });
        console.log(router.current);
      };
      const buttonClickHandleD = () => {
        router.push({
          path: "/user-params/id/name",
          params: { id: 1, name: "nickName" },
        });
      };
      const buttonClickHandleE = () => {
        router.go(-1);
      };
      const buttonClickHandleF = () => {
        router.replace({
          path: "/user-params/id/name",
          params: { id: 2, name: "replace" },
        });
      };
      const buttonClickHandleB = () => {
        router.push({ path: "/default-home" });
      };
      const buttonClickHandleC = () => {
        router.back();
      };
    </script>
  </body>
</html>
